<template>
    <div class="header_pack">
        <div class="box">
            <img :src="LOGO" alt="LOGO" class="logo" />
            <div class="user">
                <el-dropdown trigger="click" class="elDrop" @command="dropdownSelect" >
                    <span>
                        <i class="el-icon-user"></i>
                        {{user.username}}
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item icon="el-icon-back" command="logout" >注销</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
    </div>
</template>
<script>
import LOGO from "@/assets/logo.png";
import { user } from "@/store/storeTest";
import { fetchPost } from "@/js/http";

export default {
    data() {
        return {
            LOGO: LOGO,
            user: {
                username: "加载中",
            },
        };
    },
    created() {
        this.loadUser();
    },
    methods: {
        dropdownSelect(itemName) {
            switch (itemName) {
                case "logout":
                    this.logout();
                    break;
                default:
                    break;
            }
        },
        loadUser() {
            fetchPost("/frontUser/getUserInfo").then((res) => {
                this.user = res.data;
            });
        },
        logout(){
            fetchPost("/frontUser/leave").then((res) => {
                this.$router.push("/login");
            });
        }
        
    },
};
</script>
<style scoped>
.header_pack {
    height: 100%;
    width: 100%;
    background-color: rgb(65, 143, 205);
}
.box {
    width: 1250px;
    height: 100%;
    margin: 0 auto;
}
.logo {
    height: 54px;
}
.user {
    width: 180px;
    height: 100%;
    float: right;
    margin-top: 16px;
}
.elDrop{
    font-size: 18px;
}
</style>